{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}
{% block header_tail %}
<link rel="stylesheet" href="{% static 'public/CodeMirror/lib/codemirror.css' %}">
<link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
<link rel="stylesheet" href="{% static 'public/CodeMirror/theme/lesser-dark.css' %}">
<link rel="stylesheet" href="{% static 'public/CodeMirror/addon/dialog/dialog.css' %}">
<link rel="stylesheet" href="{% static 'public/CodeMirror/addon/search/matchesonscrollbar.css' %}">
<link rel="stylesheet" href="{% static 'plugins/select2/select2.css' %}">
<link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
<script src="{% static 'plugins\jQuery\jquery-2.2.3.min.js' %}"></script>
<script src="{% static 'plugins/vue1/vue.js' %}"></script>
{% endblock header_tail %}

{% block section_content %}


<div class="box-header with-border">
    <h3 class="box-title">{{ model_verbose_name }}</h3>
</div>
<!-- form start -->
<div class="box box-primary">
    <div class="box-body">
        <p style="clear: both"></p>
        <div>
            <div style="float: left;" class="input-group select-config-div">
                <label for="id" class="control-label">任务ID：</label>
                <p id="taskId" class="config-input">{{ task.id }}</p>
            </div>
            <div style="float: left;" class="input-group select-config-div">
                <label for="id" class="control-label">子任务ID：</label>
                <p id="sub_taskId" class="config-input">{{ task.sub_taskId }}</p>
            </div>
            <div style="float: left;" class="input-group select-config-div">
                <label for="id" class="control-label">任务链接：</label>
                <p class="config-input">{{ task.url }}</p>
            </div>
            <div style="float: left;" class="input-group select-config-div">
                <label for="id" class="control-label">转发内容：</label>
                <p class="config-input">{{ task.content }}</p>
            </div>
            <div style="float: left;" class="input-group select-config-div">
                <label for="id" class="control-label">任务类型：</label>
                <p class="config-input">{{ task.type | wx_task_type }}</p>
            </div>
            <div style="float: left;" class="input-group select-config-div">
                <label for="id" class="control-label">截止时间：</label>
                <p class="config-input">{{ task.deadline_time|timestamp_format:'%Y-%m-%d %H:%M:%S' }}</p>
            </div>
        </div>
        <br style="clear: both">
        <hr style="margin-top: 0">
        <div>
            {% if task.audit_status == 1 %}
            <form id="add_img" action="{% url 'WeChatTask:add_img_api' %}" method="post"
                  enctype="multipart/form-data">
                <div style="display: flex;">
                    <div class="form-group">
                        <input name="task_id" type="hidden" value="{{ task_id }}">
                        <input type="hidden" name="token" value="WSdVF94FMjVJlnKBeW6Rw0zetYQ16oDB">
                    </div>
                    <div class="form-group">
                        <span style="line-height: 30px;">反馈内容：</span>
                        <input id="feedback" name="feedback" type="text" placeholder="请先填写反馈内容，再上传截图..."
                               style="width: 500px; line-height: 27px;margin-right: 15px;">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary uploadImgBtn" style="position: relative; float: left;"
                                id="uploadImgBtn">
                            添加截图
                            <input name="screenshots" type="file" accept="image/*" multiple id="screenshots"
                                   style="position: absolute; top:0; left: 0; opacity: 0; height: 100%; width: 100%;">
                        </button>
                        <span style="padding-left: 10px; line-height: 34px;" class="msg"></span>
                    </div>
                </div>
                <div style="margin-top:20px;">
                    <button type="submit" class="btn btn-primary btn-re-audit" style="margin-right: 15px;">提交
                    </button>
                </div>
            </form>
            {% endif %}
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <!-- DIRECT CHAT -->
        <div class="box box-primary direct-chat direct-chat-primary">
            <div class="box-header with-border">
                <h3 class="box-title">截图预览</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                            class="fa fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="box-body">
                <div id="img_echo">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <!-- DIRECT CHAT -->
        <div class="box box-primary direct-chat direct-chat-primary">
            <div class="box-header with-border">
                <h3 class="box-title">截图展示</h3>
                <div class="box-tools pull-right">
                    <span data-toggle="tooltip" title="{{ communicatesNum }} Messages" class="badge bg-blue">{{ img_list.count }}</span>
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                            class="fa fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="box-body">
                <div class="direct-chat-messages" style="overflow-x: hidden; margin: 10px; background: aqua">
                    {% for img in img_list %}
                    <span style="margin-right: 10px">
                        <img src="http://zhwp.istarshine.com{{ img }}" alt="http://zhwp.istarshine.com{{ img }}" width="80px" height="100px">
<!--                        <button onclick="del_img('{{ img.id }}')">删除</button>-->
                    </span>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function del_img(img_id){
        $.post({
            url: "{% url 'WeChatTask:del_img_api' %}",
            data: {
                csrfmiddlewaretoken: "{{ csrf_token }}",
                img_id: img_id
            },
            success: function (resp) {
                alert(resp.message);
                location.reload();
            }
        })
    }

    $(document).ready(function () {
        //为外面的盒子绑定一个点击事件
        $("#uploadImgBtn").click(function () {
            /*
            1、先获取input标签
            2、给input标签绑定change事件
            3、把图片回显
             */
            //            1、先回去input标签
            var $input = $("#screenshots");
            console.log($input);
            //            2、给input标签绑定change事件
            $input.on("change", function () {
                console.log(this);
                //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
                //获取选择图片的个数
                var files = this.files;
                var length = files.length;
                console.log("选择了" + length + "张图片");
                //3、回显
                $.each(files, function (key, value) {
                    //每次都只会遍历一个图片数据
                    var div = document.getElementById("img_echo");
                    var img = document.createElement("img");
                    div.className = "pic";

                    var fr = new FileReader();
                    fr.onload = function () {
                        img.src = this.result;
                        div.appendChild(img);
                    };
                    fr.readAsDataURL(value);
                })
            });

            // //4、我们把当前input标签的id属性remove
            // $input.removeAttr("id");
            // //我们做个标记，再class中再添加一个类名就叫test
            // // var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
            // var newInput = '<input name="feedback_img" type="file" accept="image/*" multiple id="screenshots">';
            // $(this).append($(newInput));

        })

    })

</script>
<style type="text/css">
    /*//这是一个用做回显的盒子的样式*/
    .pic {
        width: 100px;
        height: 100px;
    }

    .pic img {
        width: 100%;
        height: 100%;
    }
</style>
{% endblock section_content %}
